<template>
  <div class="data">
    <el-row :gutter="20">
      <el-col :span="24" class="mb20">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>基础统计</span>
            </div>
          </template>
          <div class="text item text-center">
            <el-row :gutter="16">
              <el-col :span="1"></el-col>
              <el-col :span="3" v-for="(v, k) in basic" :key="k">
                <numerical-statistics
                  :title="'kernel.index.basic_title_' + k"
                  :description="'kernel.index.basic_description_' + k"
                  :today="v.today"
                  :yesterday="v.than"/>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" class="mb20">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>注册统计</span>
              <div class="type">
                <el-form label-width="80px">
                  <el-form-item class="mb0" label="搜索">
                    <el-select v-model="type" clearable @change="getRegisterData">
                      <el-option label="昨天" :value="2"></el-option>
                      <el-option label="最近七日" :value="3"></el-option>
                      <el-option label="最近一个月" :value="4"></el-option>
                      <el-option label="最近三个月" :value="5"></el-option>
                      <el-option label="最近半年" :value="6"></el-option>
                      <el-option label="最近一年" :value="7"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="register" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12" class="mb20">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>件杂货船期统计</span>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="groceries" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="mb20">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>集装箱船期统计</span>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="container" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24" class="mb20">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>会员行为统计</span>
              <div class="type">
                <el-form label-width="80px">
                  <el-form-item class="mb0" label="搜索">
                    <el-select v-model="level" clearable @change="getBehaviorData">
                      <el-option label="昨天" :value="2"></el-option>
                      <el-option label="最近七日" :value="3"></el-option>
                      <el-option label="最近一个月" :value="4"></el-option>
                      <el-option label="最近三个月" :value="5"></el-option>
                      <el-option label="最近半年" :value="6"></el-option>
                      <el-option label="最近一年" :value="7"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="behavior" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="home-statistical">
  import { use } from 'echarts/core'
  import NumericalStatistics from '@/components/statistical/numerical'
  import { LineChart, BarChart, PieChart, FunnelChart } from 'echarts/charts' //引入图例
  import { CanvasRenderer } from 'echarts/renderers' //使用canvas渲染，可选使用svg渲染
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';

  use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent,
    LineChart,
    BarChart,
    PieChart,
    FunnelChart,
    CanvasRenderer
  ]);

  const type = ref(4)
  const level = ref(3)

  const basic = ref([])

  const labelOption = {
    show: true,
    position: 'insideBottom',
    distance: 15,
    align: 'left',
    verticalAlign: 'middle',
    rotate: 90,
    formatter: '{c}  {name|{a}}',
    fontSize: 14,
    rich: {
      name: {}
    }
  };

  const register = reactive({
    title: {
      text: '注册统计分布',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    tooltip: {trigger: 'axis'},
    legend: {orient: 'horizontal', left: 'right', data: ['项目数']},
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    series: [{
      name: '注册会员人数',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      showBackground: true,
      data: [],
    }],
  });

  const groceries = reactive({
    title: {
      text: '件杂货船期统计分布',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    legend: {orient: 'vertical', x: 'left', y: 'bottom'},
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}条'
    },
    series: {
      name: '件杂货船期数量',
      type: 'funnel',
      maxSize: '90%',
      data: [],
    },
  });

  const container = reactive({
    title: {
      text: '集装箱船期统计分布',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    legend: {x: 'left', y: 'bottom'},
    series: {
      type: 'pie',
      radius: ['40%', '60%'],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|{c} 条}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 10,
            color: '#999'
          }
        }
      },
      labelLine: {
        length: 15,
        length2: 0,
        maxSurfaceAngle: 80
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < 100 / 2;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      },
      data: [],
    },
  });

  const behavior = reactive({
    title: {
      text: '会员行为统计分布',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      textStyle: {
        align: 'left'
      },
      label:{
        precision: 0,
      }
    },
    legend: {
      orient: 'horizontal',
      left: 'right',
      data: ['件杂货查询', '集装箱查询', '船东查询', '询价发布']
    },
    xAxis: {
      type: 'category',
      axisTick: { show: false },
      data: []
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    series: [{
      name: '件杂货查询',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      showBackground: true,
      data: [],
    }, {
      name: '集装箱查询',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      showBackground: true,
      data: [],
    }, {
      name: '船东查询',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      showBackground: true,
      data: [],
    }, {
      name: '询价发布',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      showBackground: true,
      data: [],
    }],
  });


  /**
   * 基础数字统计
   */
  const getBasicData = () => {
    $http({
      url: $http.adornUrl('/index/basic'),
      method: 'post',
      params: $http.adornParams({}),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        basic.value = data.data
      }
    })
  }


  /**
   * 注册统计
   */
  const getRegisterData = (type = 4) => {
    $http({
      url: $http.adornUrl('/index/register'),
      method: 'post',
      params: $http.adornParams({
        type: type,
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        register.xAxis.data = data.data.xaxis
        register.series[0].data = data.data.series.member
      }
    })
  }


  /**
   * 件杂货船期统计
   */
  const getGroceriesData = () => {
    $http({
      url: $http.adornUrl('/index/groceries'),
      method: 'post',
      params: $http.adornParams({}),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        groceries.series.data = data.data
      }
    })
  }


  /**
   * 集装箱船期统计
   */
  const getContainerData = () => {
    $http({
      url: $http.adornUrl('/index/container'),
      method: 'post',
      params: $http.adornParams({}),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        container.series.data = data.data
      }
    })
  }


  /**
   * 会员行为统计
   */
  const getBehaviorData = (level = 3) => {
    $http({
      url: $http.adornUrl('/index/behavior'),
      method: 'post',
      params: $http.adornParams({
        level: level,
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        behavior.xAxis.data = data.data.xaxis
        behavior.series[0].data = data.data.series.normal
        behavior.series[1].data = data.data.series.container
        behavior.series[2].data = data.data.series.shipowner
        behavior.series[3].data = data.data.series.inquiry
      }
    })
  }

  onMounted(() => {
    getBasicData()
    getRegisterData()
    getGroceriesData()
    getContainerData()
    getBehaviorData()
  })

</script>

<style lang="scss" scoped>
.chart {
  height: 62vh;
  background: #fff;
}
.type {
  float: right;
  padding: 3px 0;
}
.el-select {
  width: 120px;
}
</style>
